<script setup lang="ts">
import YNav from '@/layouts/YNav.vue';
import YAside from '@/layouts/YAside.vue';
import YMain from '@/layouts/YMain.vue';

import { storeToRefs } from 'pinia';
import { useDebounceFn } from '@vueuse/core';
import useSettingStore from '@/stores/modules/setting';
const settingStore = useSettingStore();
const { asideExpand, currentMenuItem } = storeToRefs(settingStore);
const { setAsideActive, setAsideExpand, setAsideFold } = settingStore;

const handleClickMenuItem = useDebounceFn((item: string) => {
  if (currentMenuItem.value === item) {
    setAsideFold();
    currentMenuItem.value = '';
  } else {
    currentMenuItem.value = item;
    if (asideExpand.value) {
      setAsideExpand();
    } else {
      setAsideActive();
    }
  }
}, 200);
</script>

<script lang="ts">
export default {
  name: 'ELNLayout',
};
</script>

<template>
  <Y-Nav class="bg-red-400 flex flex-col w-[64px]">
    <ul class="flex flex-col h-screen">
      <li
        class="size-16 flex justify-center items-center text-white bg-pink-400"
        :class="{ active: currentMenuItem === 'A' }"
      >
        <span @click="handleClickMenuItem('A')">A</span>
      </li>
      <li
        class="size-16 flex justify-center items-center text-white bg-slate-500"
        :class="{ active: currentMenuItem === 'B' }"
      >
        <span @click="handleClickMenuItem('B')">B</span>
      </li>
      <li
        class="size-16 flex justify-center items-center text-white bg-purple-400"
        :class="{ active: currentMenuItem === 'C' }"
      >
        <span @click="handleClickMenuItem('C')">C</span>
      </li>
      <li
        class="size-16 flex justify-center items-center text-white bg-orange-400"
        :class="{ active: currentMenuItem === 'D' }"
      >
        <span @click="handleClickMenuItem('D')">D</span>
      </li>
    </ul>
  </Y-Nav>
  <Y-Aside></Y-Aside>
  <Y-Main></Y-Main>
</template>

<style scoped>
.active {
  font-weight: bold;
  font-size: 18px;
  color: red;
}
</style>
